<template>
  <div class="od-box">
    <el-row class="od-title" type="flex" align="middle" justify="space-between">
      <h4 class="ot-title">编辑订单</h4>
      <el-button size="mini" @click="$router.go(-1)"
        >返回<i class="el-icon-arrow-right el-icon--right"
      /></el-button>
    </el-row>
    <div class="order-main">
      <el-form
        ref="orderForm"
        class="order-form"
        :model="form"
        size="small"
        :rules="rules"
      >
        <el-row :gutter="30">
          <el-col :span="6">
            <el-form-item label="订单编号" prop="ddbh">
              <el-input v-model="form.ddbh" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="组织" prop="org">
              <el-select v-model="form.org" placeholder="请选择组织" disabled>
                <el-option
                  v-for="(item, index) in orgOption"
                  :key="index"
                  :label="item.org"
                  :value="item.org"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="车间" prop="cj">
              <el-select v-model="form.cj" placeholder="请选择车间">
                <el-option
                  v-for="(item, index) in cjOption"
                  :key="index"
                  :label="item.cj"
                  :value="item.cj"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单类型" prop="ddlx">
              <el-input v-model="form.ddlx" placeholder="请选择订单类型" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="品种代码" prop="pzcode">
              <el-select
                v-model="form.pzcode"
                placeholder="请选择品种代码"
                disabled
              >
                <el-option
                  v-for="(item, index) in pzOption"
                  :key="index"
                  :label="item.pzCode"
                  :value="item.pzCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="品种名称" prop="pz">
              <el-select
                v-model="form.pz"
                placeholder="请选择品种名称"
                disabled
              >
                <el-option
                  v-for="(item, index) in pzOption"
                  :key="index"
                  :label="item.pz"
                  :value="item.pz"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="支别" prop="zb">
              <el-input v-model="form.zb" placeholder="请选择支别" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="纸管" prop="zg">
              <el-input v-model="form.zg" placeholder="请选择纸管" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="缝头绳" prop="fts">
              <el-input v-model="form.fts" placeholder="请选择缝头绳" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单数量" prop="ywc">
              <el-input v-model="form.ywc" placeholder="请输入订单数量" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位" prop="dw">
              <el-input v-model="form.dw" placeholder="请选择单位" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单交期" prop="ddjq">
              <el-date-picker
                v-model="form.ddjq"
                value-format="yyyy-MM-dd"
                placeholder="请选择订单交期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人" prop="cjr">
              <el-input v-model="form.cjr" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" prop="cjsj">
              <el-input v-model="form.cjsj" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="bz">
              <el-input v-model="form.bz" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-divider />

      <div class="btn-list">
        <el-button type="default" size="small">取消</el-button>
        <el-button type="primary" size="small" @click="updateOrder"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getSecOrder, updateSecOrder } from '@/api/order';
export default {
  props: ['dialogVisible'],
  data() {
    return {
      ddbh: '',
      oriddbh: '',
      data: [],
      form: {
        ddbh: '',
        org: '',
        cj: '',
        ddlx: '',
        pzcode: '',
        pz: '',
        zb: '',
        zg: '',
        fts: '',
        ywc: '',
        dw: '',
        ddjq: '',
        cjr: '',
        cjsj: '',
        bz: ''
      },
      rules: {
        ddbh: [{ required: true, message: '请输入订单编号', trigger: 'blur' }],
        org: [{ required: true, message: '请选择组织', trigger: 'change' }],
        cj: [{ required: true, message: '请选择车间', trigger: 'change' }],
        ddlx: [
          { required: true, message: '请选择订单类型', trigger: 'change' }
        ],
        pzcode: [
          { required: true, message: '请选择品种代码', trigger: 'change' }
        ],
        pz: [{ required: true, message: '请选择品种名称', trigger: 'change' }],
        zb: [{ required: true, message: '请选择支别', trigger: 'change' }],
        zg: [{ required: true, message: '请选择纸管', trigger: 'change' }],
        fts: [{ required: true, message: '请选择缝头绳', trigger: 'change' }],
        ywc: [{ required: true, message: '请输入订单数量', trigger: 'blur' }],
        dw: [{ required: true, message: '请选择单位', trigger: 'change' }],
        ddjq: [
          { required: true, message: '请选择订单交期', trigger: 'change' }
        ],
        cjr: [{ message: '请输入创建人', trigger: 'blur' }],
        cjsj: [{ message: '请选择创建时间', trigger: 'change' }],
        bz: [{ message: '请输入', trigger: 'blur' }]
      },
      addVisible: false
    };
  },
  computed: {
    orgOption() {
      return this.$store.getters.orgOption;
    },
    cjOption() {
      return this.$store.getters.cjOption;
    },
    pzOption() {
      return this.$store.getters.pzOption;
    }
  },
  created() {
    this.ddbh = this.$route.query.ddbh;
    this.oriddbh = this.$route.query.oriddbh;
    this.getOrder();
  },
  methods: {
    // 获取二级订单
    async getOrder() {
      let form = {
        oriddbh: this.oriddbh,
        ddbh: this.ddbh,
        page: 0,
        size: 10
      };
      const res = await getSecOrder(form);
      if (res.code == 1 && res.data) {
        let { data } = res;
        this.form = data.dataList[0];
        this.$nextTick(() => {
          this.$refs['orderForm'].clearValidate();
        });
      }
    },
    async updateOrder() {
      this.$refs['orderForm'].validate(async valid => {
        if (valid) {
          const res = await updateSecOrder(this.form);
          if (res.code == 1) {
            this.$message({
              message: '更新订单成功',
              iconClass: 'el-icon-success',
              customClass: 'common-message',
              onClose: () => {
                this.$router.go(-1);
              }
            });
          }
        } else {
          this.$message({
            message: '请完成必填项',
            iconClass: 'el-icon-warning',
            customClass: 'common-message'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import '~@/assets/css/order.scss';
</style>
